<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:oo="http://openfaces.org/">

    <ui:composition template="/WEB-INF/templates/principal.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.CreateClienteTitle}"></h:outputText>
        </ui:define>
        <ui:define name="content">
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            
            <script type="text/javascript">
                var geocoder = new google.maps.Geocoder();
                function geocodePosition(pos) {
                    geocoder.geocode({
                        latLng: pos
                    }, function(responses) {
                        if (responses != responses.length > 0) {
                            updateMarkerAddress(responses[0].formatted_address);
                        } else {
                            updateMarkerAddress('Cannot determine address at this location.');
                        }
                    });
                }

                function updateMarkerPosition(latLng) {
                    $('.lng').html('');
                    $('.lat').html('');
                    $('.lng').val(latLng.lng());
                    $('.lat').val(latLng.lat());
                    //$('#lng').val(latLng.lng());
                    //$('#lat').val(latLng.lat());
                }

                function updateMarkerAddress(str) {
                    $('.dir').html('');
                    $('.dir').val(str);
                    //$('#clienteDireccion').val(str);
                }

                function initialize() {
                    var latLng = new google.maps.LatLng(-27.332354,-55.866001);
                    var map = new google.maps.Map(document.getElementById('mapCanvas'), {
                        zoom: 15,
                        center: latLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });
                    var marker = new google.maps.Marker({
                        position: latLng,
                        title: 'Estoy aqui',
                        map: map,
                        draggable: true
                    });
  
                    // Update current position info.
                    updateMarkerPosition(latLng);
                    geocodePosition(latLng);
  
                    // Add dragging event listeners.
                    google.maps.event.addListener(marker, 'dragstart', function() {
                        updateMarkerAddress('Arrastrando...');
                    });
  
                    google.maps.event.addListener(marker, 'drag', function() {
                        updateMarkerPosition(marker.getPosition());
                    });
  
                    google.maps.event.addListener(marker, 'dragend', function() {
                        geocodePosition(marker.getPosition());
                    });
                }

                // Onload handler to fire off the app.
                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            </h:panelGroup>
            <h:form>
                <h:panelGrid columns="2">
                    <h:outputLabel value="#{bundle.CreateClienteLabel_id}" for="id" />
                    <h:inputText id="id" value="#{clienteController.selected.id}" title="#{bundle.CreateClienteTitle_id}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_id}"/>
                    <h:outputLabel value="#{bundle.CreateClienteLabel_razonSocial}" for="razonSocial" />
                    <h:inputText id="razonSocial" value="#{clienteController.selected.razonSocial}" title="#{bundle.CreateClienteTitle_razonSocial}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_razonSocial}"/>
                    <h:outputLabel value="#{bundle.CreateClienteLabel_documento}" for="documento" />
                    <h:inputText  id="documento" value="#{clienteController.selected.documento}" title="#{bundle.CreateClienteTitle_documento}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_documento}" />
                    <h:outputLabel value="#{bundle.CreateClienteLabel_telefono}" for="telefono" />
                    <h:inputText id="telefono" value="#{clienteController.selected.telefono}" title="#{bundle.CreateClienteTitle_telefono}" />
                    <h:outputLabel value="#{bundle.CreateClienteLabel_longitud}" for="longitud" />
                    <h:inputText class="lng" id="longitud" value="#{clienteController.selected.longitud}" title="#{bundle.CreateClienteTitle_longitud}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_longitud}"/>
                    <h:outputLabel value="#{bundle.CreateClienteLabel_latitud}" for="latitud" />
                    <h:inputText class="lat" id="latitud" value="#{clienteController.selected.latitud}" title="#{bundle.CreateClienteTitle_latitud}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_latitud}" name="clienteLat"/>
                    <h:outputLabel value="#{bundle.CreateClienteLabel_direccion}" for="direccion" />
                    <h:inputText id="direccion" value="#{clienteController.selected.direccion}" title="#{bundle.CreateClienteTitle_direccion}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_direccion}" class="dir"/>
                    <h:outputLabel value="#{bundle.CreateClienteLabel_ciudadId}" for="ciudadId" />
                    <h:selectOneMenu id="ciudadId" value="#{clienteController.selected.ciudadId}" title="#{bundle.CreateClienteTitle_ciudadId}" required="true" requiredMessage="#{bundle.CreateClienteRequiredMessage_ciudadId}">
                        <f:selectItems value="#{ciudadController.itemsAvailableSelectOne}"/>
                    </h:selectOneMenu>
                </h:panelGrid>
                <br />
                <h:commandLink action="#{clienteController.create}" value="#{bundle.CreateClienteSaveLink}" />
                <br />
                <br />
                <h:commandLink action="#{clienteController.prepareList}" value="#{bundle.CreateClienteShowAllLink}" immediate="true"/>
                <br />
                <br />
                <h:commandLink value="#{bundle.CreateClienteIndexLink}" action="/bienvenido" immediate="true" />

                <div class="clearfix"><!--&nbsp;--></div>
                <span>Arrastre el marcador ubicar su direccion</span>

                <div class="clearfix"><!--&nbsp;--></div>

                <div id="map">
                    <div id="mapCanvas" style="width:100%; height: 400px;"></div>
                </div>

                <div class="clearfix"><!--&nbsp;--></div>

            </h:form>
            <style type="text/css">
                div#map {
                    height: 400px;
                    margin: 10 auto;
                    width: 650px;
                }
            </style>
            
            
   


        </ui:define>
     
        
    </ui:composition>

</html>
